<template>
	<view>
		<view class="all" v-if="Spring_frame">

		</view>
		<view class="avtar ">
			<!-- 			<image style="width: 204rpx;border-radius: 50%;
			height: 204rpx;" src="https://img1.baidu.com/it/u=3788399534,270513252&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
				mode=""></image> -->
			<image style="width: 204rpx;border-radius: 50%;
			height: 204rpx;" src="https://img1.baidu.com/it/u=3788399534,270513252&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
				mode=""></image>
		</view>
		<view class="username op">
			<input type="text" :value="username" disabled placeholder-style="font-size: 28rpx;color: #B6BDBD;" />
		</view>
		<view class="username op">
			<input type="text" :value="update_user.phonenumber" placeholder="请输入手机号"
				placeholder-style="font-size: 28rpx;color: #B6BDBD;" @input="update_phonenumber" />
		</view>
		<view class="username op">
			<input type="text" :value="update_user.password" placeholder="请输入密码"
				placeholder-style="font-size: 28rpx;color: #B6BDBD;" @input="update_password" />
		</view>
		<view class="btn_btm" @tap="up_name">
			提交
		</view>
		<view class="spring_frame" v-if="Spring_frame">
			<view class="spring_frame_top">
				确认修改并提交审核？
			</view>
			<view class="spring_frame_btm">
				<text class="no" @tap="no">取消</text>
				<text class="ok" @tap="ok">确认</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Spring_frame: false,
				username: '',
				update_user: {
					password: '',
					phonenumber: '',
				}
			}
		},
		onLoad(e) {
			this.username = e.username
		},
		methods: {
			/* 提交资料 */
			up_name() {
				var phone = this.update_user.phonenumber
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (strTemp.test(phone)) {
					console.log('手机验证通过');
					this.Spring_frame = true
				} else if (this.update_user.phonenumber == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
				} else if (this.update_user.password == '') {
					uni.showToast({
						title: "请输入密码",
						icon: 'error'
					})
				} else if (!strTemp.test(phone)) {
					uni.showToast({
						title: "请输入正确手机",
						icon: 'error'
					})
				}
				console.log(this.update_user, '修改提交的信息');
			},
			//取消提交
			no() {
				this.update_user.password = ''
				this.update_user.phonenumber = ''
				this.Spring_frame = false
			},
			//确定提交
			ok() {
				this.Spring_frame = false
				this.$https.post('modifyInfo', {
					phonenumber: this.update_user.phonenumber,
					password: this.update_user.password
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "提交成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: '1'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: '手机已经被注册',
							icon: 'error'
						})
					}
					console.log(res, 'res');
				})
			},
			//获取修改的密码
			update_password(e) {
				this.update_user.password = e.detail.value
			},
			//获取修改的手机号
			update_phonenumber(e) {
				this.update_user.phonenumber = e.detail.value
			}
		}

	}
</script>

<style scoped>
	.all {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 9;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
	}

	.spring_frame_top {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;
		width: 100%;
	}

	.no,
	.ok {
		width: 240rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.no {
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 2rpx solid #4A67DF;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4A67DF;

	}

	.ok {
		background: #4A67DF;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.spring_frame_btm {
		display: flex;
		justify-content: space-between;
		margin-top: 90rpx;
	}

	.spring_frame {
		position: absolute;
		top: 340rpx;
		left: 50%;
		margin-left: -303rpx;
		width: 606rpx;
		height: 344rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		z-index: 99;
		padding: 60rpx 52rpx;
		box-sizing: border-box;
	}

	.btn_btm {
		width: 690rpx;
		height: 92rpx;
		background: #4252CD;
		border-radius: 46rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
		position: absolute;
		left: 50%;
		margin-left: -345rpx;
		bottom: 100rpx;
		line-height: 92rpx;
	}

	.avtar {
		width: 204rpx;
		height: 204rpx;
		border-radius: 50%;
		overflow: hidden;
		padding: 75rpx 0 78rpx;
		margin: auto;
	}

	.op {
		margin-bottom: 58rpx;
		padding-bottom: 40rpx !important;
	}

	.username {
		margin-left: 30rpx;
		width: 690rpx;
		border-bottom: 2rpx solid #EFEFEF;
		padding-bottom: 40rpx;
	}
</style>
